<template>
    <div>
        <el-dialog title="详情" :visible.sync="dialogVisible" width="50%" @opened="initScroll">
            <div v-scroll="handleScroll" class="scroll-box" @wheel.passive="handleWheel">
                <div class="msg-box" v-loading="listLoading">
                <div v-for="(v, i) in tableList" :key="i" class="msg-item" :class="v.from_user_id == userId ? 'right' : ''">
                    <div class="msg-header-img">
                        <img :src="v.fromUserIcon">
                    </div>
                    <div class="msg-content">
                        <div class="msg-header"> 
                            <div>{{v.fromUserNickName}} <span style="color: #409eff;">发送给</span> {{ v.toUserNickName }}</div>
                            <div style="margin-left: 10px;">{{ v.createAt }}</div>
                        </div>
                        <div class="msg-body">
                            <div class="msg-body-text" v-if="v.msg_type == 1">{{ v.msg_body }}</div>
                            <div class="msg-body-img" v-if="v.msg_type == 11">
                                <el-image :src="v.msg_body.thumbnail_download_url" :preview-src-list="[v.msg_body.thumbnail_download_url]"  style="width: 160px; height: 100px;"></el-image>
                            </div>
                            <div class="msg-body-video" v-if="v.msg_type == 14">
                                <video :src="v.msg_body.download_url" controls="controls" style="width: 160px; height: 100px;"></video>
                            </div>
                            <div class="msg-body-audio" v-if="v.msg_type == 13">
                                <audio :src="v.msg_body.download_url" controls="controls" style="width: 160px; height: 50px;"></audio>
                            </div>
                            <div class="msg-body-file" v-if="v.msg_type == 200 && v.sub_msg_type == 150">
                                分享： <video :src="v.msg_body.linkUrl" controls="controls" style="width: 160px; height: 100px;"></video>
                            </div>
                            <div class="msg-body-file" v-if="v.msg_type == 200 && v.sub_msg_type == 100">
                                邀请进群： <span>{{ v.msg_body.groupName }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {  getImsMemberChatRecordPage} from '@/api/im'
const DEBOUNCE_TIME = 200 // 防抖时间设为200ms
const THRESHOLD = 15 // 将阈值从5px调整到15px
export default {
    data() {
        return {
            dialogVisible: false,
            lastScrollTop: 0,
            isAtBottom: false,
            isAtTop: true,
            debounceTimer: null,
            whereForm: {
                fromUserId: '',
                convType: '',
                msgId: '',
                containsStatus: false,
                convId: ''
            },
            tableList:[],
            listLoading: false,
            userId: '', 
        }
    },
    methods: {
        opendialog(v) { 
            this.dialogVisible = true
            this.userId = v.fromSocialId
            console.log(v);
            this.whereForm = {
                fromUserId: v.fromSocialId,
                convType: v.convType,
                msgId: v.msgId,
                position: 2,
                containsStatus: true,
                convId: v.convId
            }
            // return 
          this.getList()
        },
        getList() {
            this.listLoading = true;
            getImsMemberChatRecordPage(this.whereForm).then(res => {
                this.tableList = res.data
                this.listLoading = false;
            })
        },
        initScroll() {
            this.$nextTick(() => {
                const container = this.$el.querySelector('.scroll-box')
                this.lastScrollTop = container.scrollTop
                // 修正初始化判断
                this.isAtTop = container.scrollTop <= THRESHOLD
                this.isAtBottom = (container.scrollTop + container.clientHeight) >= 
                    (container.scrollHeight - THRESHOLD)
            })
        },
        handleScroll: _.debounce(function (e, position) {
            const container = e.target
            const currentScrollTop = position.scrollTop

            // 精确计算容器参数
            const clientHeight = Math.floor(container.clientHeight)
            const scrollHeight = Math.floor(container.scrollHeight)

            // 使用更严格的条件判断
            this.isAtTop = currentScrollTop <= THRESHOLD
            this.isAtBottom = (currentScrollTop + clientHeight) >= (scrollHeight - THRESHOLD)

            // 互斥判断逻辑
            clearTimeout(this.debounceTimer)
            this.debounceTimer = setTimeout(() => {
                if (this.isAtTop && !this.isAtBottom) {
                    this.handleReachTop()
                } else if (this.isAtBottom && !this.isAtTop) {
                    this.handleReachBottom()
                }
            }, DEBOUNCE_TIME)

            this.lastScrollTop = currentScrollTop
        }, 100),
        handleWheel: _.debounce(function (event) {
            // 添加容器高度校验
            const container = this.$el.querySelector('.scroll-box')
            if (container.scrollHeight <= container.clientHeight) return

            // ...其余原有逻辑
        }, DEBOUNCE_TIME),


        // 刚进入 
        handleReachTop() {
            this.whereForm.position = 1
            this.whereForm.msgId = this.tableList[0].msg_id || ''
            this.whereForm.containsStatus =  false
            this.listLoading = true;
            getImsMemberChatRecordPage(this.whereForm).then(res => {

                if(res.data.length == 0) return this.$message.error('没有更多数据了')
                this.tableList = [...res.data, ...this.tableList]
            }).finally(()=> {
                this.listLoading = false;
            })

        },
        handleReachBottom() {
            this.whereForm.msgId = this.tableList[this.tableList.length - 1].msg_id || ''
            this.whereForm.containsStatus =  false
            this.listLoading = true;
            getImsMemberChatRecordPage(this.whereForm).then(res => {
                if(res.data.length == 0) return this.$message.error('没有更多数据了')
                this.tableList =  [...this.tableList, ...res.data]
            }).finally(()=> {
                this.listLoading = false;
            })
            console.log('触发底部事件')
        }
    },
    beforeDestroy() {
        clearTimeout(this.debounceTimer)
    }
}
</script>

<style lang="scss" scoped>
.right {

    // background-color: pink;
}
.scroll-box {
    height: 500px;
    overflow: auto;
    border: 1px solid #eee;

    &::-webkit-scrollbar {
        width: 6px;
    }

    &::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 3px;
    }
}
.msg-item {
        display: flex;
        margin-bottom: 10px;
        .msg-header-img {
            width: 20px;
            height: 20px;
            background-color: #f5f5f5;
            width: 3%;
            border-radius: 50%;
            overflow: hidden;
            img {
                width: 100%;
                height: 100%;
            }
        }
        .msg-content {
            width: 80%;
            margin-left: 10px;
            .msg-header {
                display: flex;
                // justify-content: space-between;
            }
            .msg-body {
                margin-top: 10px;
                margin-left: 20px;
                .msg-body-text {
                    color: #000;
                    font-size: 14px;
                    font-weight: bold;
                    letter-spacing: 1px;
                }
                .msg-body-file {
                    display: flex;
                    color: #409eff;
                }
            }
        }
    }
</style>